	<template>
		<view class="content">
			<!-- 卡片1 -->
			<view class="card-1">
				<!-- 定位 -->
				<view class="location">
					<view class="left">
						<text class="icon">定位图标</text>
						<text class="locatin-name">
							我的校区:没雨溪社区
						</text>
					</view>
					<view class="right">
						<view class="icon">

						</view>
						<view class="">
							切换
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="swiper">
					<swiper class="sw" indicator-dots indicator-color="#DDDDDD" circular indicator-active-color="#333333"
						autoplay interval="2000">
						<swiper-item v-for="item in carouselList" :key="item._id">
							<image :src="item.imgurl"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 类目 -->
				<view class="category">
					<view class="category-item" v-for="item in categoryList" :key="item._id">
						<image class="img" mode="aspectFill" :src="item.categoryImgurl">

						</image>
						<view class="text">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</view>
			<!-- 卡片2 -->
			<view class="card-2">
				<view class="zero-shoping">
					<view class="title">
						0元购
					</view>
					<view class="goods">
						<swiper class="swiper" autoplay circular interval="3000" :indicator-dots="false"
							indicator-active-color="red">
							<swiper-item v-for="item in zeroBuyList" :key="item">
								<uni-grid :column="3" :show-border="false" :highlight="true" @change="change">
									<uni-grid-item v-for="(goods,index) in item" :index="index" :key="index"
										@tap="goProductDetail(goods)">
										<view class="grid-item-box">
											<image :src="goods.imageUrl" class="image" mode="aspectFill" />
											<text class="text">{{ goods.productName }}</text>
											<view class="price">
												<view class="p" style="text-decoration: line-through;">
													¥{{goods.price.toFixed(2)}}
												</view>
												<view class="b">立即抢</view>
											</view>
										</view>
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="card-3">
				<view class="choiceness">
					<view class="title">
						精选·推荐
					</view>
					<view class="goods">
						<view class="goods-item" v-for="item in productList" :key="item._id">
							<image class="img" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="text">
								{{item.productName}}
							</view>
							<view class="price">
								¥{{item.price.toFixed(2)}}
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>
	</template>

	<script setup>
		import { ref, onMounted } from "vue"
		import { getCarouselApi, getProductListApi, getCategoryApi } from "@/api/product.js"
		import { onShow, onPullDownRefresh } from "@dcloudio/uni-app"
		//请求轮播图
		let carouselList = ref([])
		let getCarousel = async () => {
			try {
				let res = await getCarouselApi();
				// console.log('轮播图---', res)
				carouselList.value = res.data;
				return Promise.resolve(res.data)

			} catch (e) {
				console.log(e.toString())
				return Promise.reject(e.toString())
			}
		}
		//请求类目
		let categoryList = ref([])
		let getCategory = async () => {
			try {
				let res = await getCategoryApi();
				console.log('类目---', res)
				categoryList.value = res.data;
				return Promise.resolve(res.data)

			} catch (e) {
				console.log(e.toString())
				return Promise.reject(e.toString())
			}
		}
		//零元购数据
		let zeroBuyList = ref([])
		//请求产品列表
		let productList = ref([])
		let getProduct = async () => {
			try {
				let res = await getProductListApi();
				console.log('商品---', res)
				productList.value = res.data;
				zeroBuyList.value = [productList.value.filter(item => item.isZero)];
				console.log('---0元购', zeroBuyList.value)
				return Promise.resolve(res.data)

			} catch (e) {
				console.log(e.toString())
				return Promise.reject(e.toString())
			}
		}

		//声明一个函数专门 用于获取首页数据
		let fetchData = async () => {
			uni.showToast({
				title: '加载中',
				icon: 'loading'
			})
			await getCarousel()
			await getCategory()
			await getProduct()
			uni.hideToast()
		}
		//下拉的时候

		onPullDownRefresh(async() => {
			await getCarousel()
			await getCategory()
			await getProduct()
			uni.stopPullDownRefresh()
		})

		onMounted(() => {
			fetchData()
		})
		onShow(() => {
			console.log(123)
		})
	</script>

	<style lang="scss">
		.card-3 {
			background-color: #fff;
			padding: 0 15px;

			.choiceness {
				.title {
					font-size: 20px;
					font-weight: bolder;
					text-align: center;
					height: 45px;
					color: #383838
				}

				.goods {
					// border-top: 2px solid #BBBBBB;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.goods-item {

						margin: 10px 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 312rpx;
						// height:245px;
						box-sizing: border-box;
						padding-bottom: 20px;
						box-shadow: 1px 1px 25px 5px #bbb;
						border-radius: 8%;

						.img {
							border-radius: 8% 8% 0 0;
							height: 160px;
							width: 100%;
							// border: 1px solid #ccc;
						}

						.text {
							height: 37px;
							margin-top: 5px;
							// border: 1px solid #ccc;
						}

						.price {
							height: 18px;
						}
					}
				}
			}
		}

		.card-2 {
			margin-top: 20px;
			background-color: #fff;

			.zero-shoping {

				/*#ifdef MP-WEIXIN*/
				uni-grid {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				uni-grid-item {
					flex: 1
				}

				/* #endif */

				.title {
					font-weight: bolder;
					text-align: center;
					padding-top: 15px;
					color: rgba(255, 52, 37, 1);
					font-size: 18px;
					width: 750rpx;
					height: 50px;
				}

				.image {
					width: 25px;
					height: 25px;
				}

				.text {
					font-size: 14px;
					margin-top: 5px;
					width:100px;
					height:20px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}


				.grid-dynamic-box {
					margin-bottom: 15px;
				}

				.grid-item-box {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 15px 0;

					.image {
						width: 242rpx;
						height: 122px;
						border-radius: 5%;
					}

					.price {
						width: 202rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-top: 5px;

						.b {

							font-size: 12px;
							height: 20px;
							width: 40%;
							text-align: center;
							background-color: #E87B7B;
							color: #fff;
						}

						.p {
							color: #F03939;
							text-align: left;
							height: 20px;
							width: 70%;
							padding-left: 5px;
							background-color: rgb(251, 231, 231);
						}
					}

				}

				.grid-item-box-row {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 15px 0;
				}

				.grid-dot {
					position: absolute;
					top: 5px;
					right: 15px;
				}

				.swiper {
					height: 190px;
				}

				/* #ifdef H5 */
				@media screen and (min-width: 768px) and (max-width: 1425px) {
					.swiper {
						height: 630px;
					}
				}

				@media screen and (min-width: 1425px) {
					.swiper {
						height: 830px;
					}
				}

				/* #endif */

			}
		}




		.card-1 {
			background-color: #fff;

			.location {
				padding: 0 8rpx;
				margin: 5px 0;
				display: flex;
				justify-content: space-between;

				.left {
					min-width: 292rpx;
					height: 20px;
				}

				.right {
					min-width: 70rpx;

				}
			}

			.swiper {
				height: 149px;
				width: 750rpx;

				.sw,
				swiper-item,
				image {
					width: 100%;
					height: 100%;
				}

			}

			.category {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 15px 20px;
				flex-wrap: wrap;
				padding-left: 60rpx;

				.category-item {
					border-radius: 10%;
					width: 110rpx;
					font-size: 12px;
					// border: 1px solid #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-right: calc((100% - 110rpx * 5)/4);
					margin-top: 20px;

					.img {
						border-radius: 10%;
						width: 100rpx;
						height: 55px;
						// border: 1px solid red;
					}

					.text {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						text-align: center;
					}
				}
			}
		}
	</style>